<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id='app'>
  <h3>姓名</h3>
  <p>{{name}}</p>
  <h3>年龄</h3>
  <p>{{age}}</p>
</div>
</body>
</html>
<script>
  document.addEventListener('DOMContentLoaded', function(){
    let opt = {el:'#app', data:{name:'检索中...', age:30}}
    let vm = new Vue(opt)
    setTimeout(() => {
      opt.data.name = '王永峰'
    }, 2000);
  }, false)
  class Vue{
    constructor(opt){
      this.opt = opt
      this.observe(opt.data)
      let root = document.querySelector(opt.el)
      this.compile(root)
    }
    // 为响应式对象 data 里的每一个 key 绑定一个观察者对象
    observe(data){
      Object.keys(data).forEach(key => {
        let obv = new Observer()
        data["_"+key] = data[key]
        // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
        Object.defineProperty(data, key, {
          get(){
            Observer.target && obv.addSubNode(Observer.target);
            return data['_'+key]
          },
          set(newVal){
            obv.update(newVal)
            data['_'+key] = newVal
          }
        })
      })
    }
    // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来
    compile(node){
      [].forEach.call(node.childNodes, child =>{
        if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){
          let key = RegExp.$1.trim()
          child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key])
          Observer.target = child
          this.opt.data[key]
          Observer.target = null
        }
        else if (child.firstElementChild)
          this.compile(child)
      })
    }
  }
  // 常规观察者类
  class Observer{
    constructor(){
      this.subNode = []
    }
    addSubNode(node){
      this.subNode.push(node)
    }
    update(newVal){
      this.subNode.forEach(node=>{
        node.innerHTML = newVal
      })
    }
  }
</script>
